<template>
	<view>
    <view class="ceng">
      <view class="search">
        <input type="text" class="search-input" v-model="input" placeholder="请输入关键字查询加油站" @input="inputChange">
      </view>
      <view class="coupon" v-for="(item, index) in couponList" :key="index">
        <view class="coupon-left">
          <img class="coupon-left-img" mode="aspectFill" src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/2023/10/15/59897539-19149286-19341697358997_.pic.jpg" alt="">
        </view>
        <view class="coupon-right">
          <view class="coupon-right-1" @tap="goAddress(item)">
            <view class="coupon-right-1-left">
              {{item.name}}>
            </view>
          </view>
          <view class="coupon-right-3">
            <view class="coupon-right-3-item">{{item.des}}</view>
          </view>
          <view class="coupon-right-2">
            <view class="coupon-right-2-left"  @tap=makePhone(item.tel)>
              <view class="coupon-right-2-left-1">tel:</view>
              <view class="coupon-right-2-left-2">{{item.tel || '暂无'}}</view>
            </view>
            <view  class="coupon-right-2-right" @tap="goCoupon">去购卡</view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
        couponList: [],
        originList: [],
        input: ''
			}
		},
		async onShareAppMessage(options) {
			if (options.from === "menu") {
				console.log(1111);
			}
			return {
				title: "城市车位：您的车位选择",
				path: "/pages/index/index",
				imageUrl: "https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/2023/09/01/zhihuitingche.png",
			};
		},
    onPullDownRefresh() {
      this.getCoupon()
      setTimeout(function () {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onLoad(options){
      if (options.type) {
        this.type = parseInt(options.type)
      }
    },
		onShow() {
      this.getCoupon()
		},
		methods: {
      inputChange(e) {
        console.log(e.detail.value)
        let str = e.detail.value
        if (str) {
          this.couponList = this.couponList.filter(n => {
            return n.name.indexOf(str) > -1
          })
        } else {
          this.couponList = [].concat(this.originList)
        }
      },
      goAddress(item) {
        uni.openLocation({
          latitude: parseFloat(item.lat),
          longitude: parseFloat(item.lng),
          name: item.name,
          success: function () {
            console.log('success');
          },
          fail: (err) => {
            console.log(err)
          }
        });

      },
      makePhone(tel) {
        if(tel) {
          uni.makePhoneCall({
            phoneNumber: tel
          })
        }
      },
      goCoupon() {
        uni.navigateTo({
          url: '/pages/coupon_list/coupon_list?type=2'
        })
      },
      getCoupon() {
         let that = this
          vk.callFunction({
            url: 'user/pub/hezuodianAllget',
            data: {
              type: this.type
            },
            success: (res) => {
              that.couponList = res.rows
              that.originList = res.rows
            }
          })
      }
  }
	};
</script>

<style lang="scss">
  .box-img {
    width: 750rpx;
    height: 300rpx;
  }
  .ceng {
    padding: 14rpx 24rpx 24rpx;
  }
  .search {
    position: sticky;
    left: 0;
    top: 0;
    height: 66rpx;
    background: #fff;
    z-index: 99;
    &-input {
      border: 1px solid #ccc;
      border-radius: 20rpx;
      height: 100%;
      padding: 0 20rpx
    }
  }
	.coupon {
    background-color: #fff;
    width: 654rpx;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
    display: flex;
    padding: 24rpx;
    position: relative;
    &-cover {
      position: absolute;
      left: 0%;
      top: 0;
      background: #fff;
      opacity: 0.5;
      z-index: 99;
      width: 100%;
      height: 100%;
    }
    &-right {
      display: flex;
      flex-direction: column;
      flex:1;
      &-1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-left {
          color: #1D2129;
          font-family: PingFang SC;
          font-size: 30rpx;
          font-style: normal;
          font-weight: 500;
        }
        &-right {
            display: flex;
            align-items: baseline;
            font-family: PingFang SC;
            font-size: 24rpx;
            font-style: normal;
            color: #525252;
            
            &-1 {
              font-family: PingFang SC;
              font-size: 24rpx;
              font-style: normal;
              color: #86909C;;
            }
            &-2 {
              margin-left: 6rpx;
               color: #FF3D00;
              font-family: PingFang SC;
              font-size: 30rpx;
              font-weight: 500;
            }
        }
      }
      &-2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
        &-left {
          display: flex;
          align-items: baseline;
           &-1 {
             color: #FF3D00;
             margin-right: 10rpx;
           }
           &-2 {
             color: #FF3D00;
             font-family: PingFang SC;
             font-size: 30rpx;
             font-style: normal;
             font-weight: 500;
           }
        }
        &-right {
          width: 154rpx;
          height:56rpx;
          border-radius: 114rpx;
          background-color: #fff;
          text-align: center;
          line-height: 56rpx;
          font-family: PingFang SC;
          font-size: 30rpx;
          font-style: normal;
          font-weight: 500;
          color: #fff;
          background-color: #005ECD;
        }
      }
      &-3 {
        display: flex;
        flex-wrap: wrap;
        &-item {
          border-radius: 12rpx;
          line-height: 40rpx;
          padding: 0 8rpx;
          text-align: center;
          font-family: PingFang SC;
          font-size: 20rpx;
          color: #005ECD;
          border: 1px solid #005ECD;
          margin-right: 10rpx;
          margin-top: 10rpx;
        }
      }
    }
    &-left {
      width: 180rpx;
      height: 180rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      &-img {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
  }
</style>
